<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-17 09:47:16
 * @LastEditors: gaoyu gy15354315043@163.com
 * @LastEditTime: 2024-11-21 15:56:20
 * @Description: 公告通知
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <div class="table-box platformMessage">
        <DtTable ref="dtTableRef" :loading="stateData.loading" :columns="columns" :initParam="filterForm"
            :requestApi="messagePage" :row-key="'messageId'">
            <template #tableHeader>
                <div class="topbox">
                    <div class="topbox-right">
                        <el-button @click="handleAllRead" v-if="stateData.isShowRead">一键已读</el-button>
                        <el-button @click="handleAllDelete" v-if="stateData.isShowDelete">一键清除</el-button>
                    </div>
                </div>
            </template>
            <template #messageTitle="scope">
                <el-button class="messageTitle" @click="handleDetail(scope.row)" type="primary" link>{{
                    scope.row.messageTitle
                    }}</el-button>
            </template>
        </DtTable>
    </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router';
import { messagePage, clear, deleteAll, unReadMessage } from '../../api/index'
import { platMessageListType, messageDatal } from '../../api/types'
import { useWebsocketStore } from '@/framework/store/modules/websocket';
const websocketStore = useWebsocketStore()
defineOptions({
    name: 'NoticeList'
});
const router = useRouter();
const vm = getCurrentInstance()!
const { $modal } = vm.appContext.config.globalProperties
const dtTableRef = ref()
watch(
    () => dtTableRef?.value?.searchParam,
    (newValue) => {
        stateData.isShowRead = newValue.readFlag == '0'
        stateData.isShowDelete = newValue.readFlag == '1'
    },
    { deep: true }
)
interface dataType {
    loading: boolean;
    activeName: number | undefined;
    isShowRead: boolean;
    isShowDelete: boolean;
}
interface queryParamType {
    messageCategory: number;
}
const filterForm = ref<queryParamType>({
    messageCategory: 2,
})
const stateData = reactive<dataType>({
    loading: false,
    activeName: undefined,
    isShowRead: false,
    isShowDelete: false
})
const columns = [
    { type: 'selection', width: 80 },
    { type: 'index', width: 80 },
    { prop: 'messageTitle', label: '消息标题', search: { el: 'input' }, slotName: 'messageTitle' },
    { prop: 'messageContent', label: '消息内容', search: { el: 'input' } },
    { prop: 'realSendTime', label: '发送时间' },
    {
        prop: 'top',
        label: '置顶',
        enum: [{ label: '置顶', value: '1' }, { label: '-', value: '0' }]
    },
    {
        prop: 'readFlag',
        label: '状态',
        enum: [{ label: '未读', value: '0' }, { label: '已读', value: '1' }],
        search: {
            el: 'select'
        }
    },
]
/**
 * @description: 一键已读
 * @return {*}
 */
async function handleAllRead(): Promise<void> {
    if (dtTableRef.value.selectedList.length === 0) {
        $modal.msgError('请先选择要已读的消息!')
    } else {
        const messageIds = dtTableRef.value.selectedList.map((res: platMessageListType) => res.messageId).join(',')
        const queryParam: Partial<messageDatal> = {
            messageCategory: stateData.activeName,
            messageIds: messageIds
        }
        await clear(queryParam)
        await initUnReadMessage()
        getTableList()
    }
}
/**
 * @description: 一键清除
 * @return {*}
 */
async function handleAllDelete(): Promise<void> {
    if (dtTableRef.value.selectedList.length === 0) {
        $modal.msgError('请先选择要清除的消息!')
    } else {
        const messageIds = dtTableRef.value.selectedList.map((res: platMessageListType) => res.messageId).join(',')
        const queryParam: Partial<messageDatal> = {
            messageCategory: stateData.activeName,
            messageIds: messageIds
        }
        await deleteAll(queryParam)
        getTableList()
    }
}
/**
 * @description: 查看详情
 * @return {*}
 */
function handleDetail(item: platMessageListType): void {
    router.push({
        path: '/message-detail',
        query: {
            messageId: item.messageId
        }
    })
}
/**
 * @description: 刷新列表
 * @param {*} formModel
 * @return {*}
 */
const getTableList = (): void => {
    dtTableRef.value.getTableList()
}
/**
 * @description: 刷新小铃铛未读消息
 * @return {*}
 */
async function initUnReadMessage(): Promise<void> {
    const res = await unReadMessage()
    websocketStore.setIsUnReadMessage(res.data)
}
</script>
<style scoped lang="scss">
.platformMessage {
    .topbox {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .topbox-left {
            display: flex;
            align-items: center;

            .buttonType {
                margin-left: 16px;

                :deep(.el-radio-button__inner) {
                    font-weight: 400;
                }
            }
        }
    }

    .messageTitle {
        cursor: pointer;
        text-decoration: underline;
    }
}
</style>